<template>
  <div class="dashboard" :style="{ minHeight: store.oj.systemParams.screenHeight * 0.9 + 'px' }">
    <div class="d-head"><i class="iconfont icon-shuju8"></i> 数据视图</div>
    <div class="d-body">
      <div class="d-b-left">
        <div class="user">
          <div class="u-head">
            <div class="avatar">
              <div class="diyAvatar" v-if="
                !store.oj.userData.avatar || store.oj.userData.avatar === ''
              ">
                {{ store.oj.userData.username[0] }}
              </div>
              <n-avatar v-else :bordered="true" round :size="90" :src="store.oj.getUserAvatar" :lazy="true" />
            </div>
            <div class="u-info">
              <div class="u-name">{{ store.oj.userData.username }}</div>
              <div class="u-lever">
                <div class="ordinary" v-if="store.oj.userData.authLevel === 1">
                  管理员
                </div>
                <div class="super" v-else>超级管理员</div>
              </div>
            </div>
          </div>
        </div>
        <div class="user-login">
          <div class="laster">最近登录</div>
          <div class="login-info">
            <div class="login" v-if="userInfo.createTime !== null">
              时间: {{ userInfo.createTime }}
            </div>
            <div class="login" v-if="userInfo.ip !== null">
              IP地址: {{ userInfo.ip }}
            </div>
            <div class="login" v-if="userInfo.os !== null">
              系统:
              <n-ellipsis style="max-width: 50%">
                {{ userInfo.os }}
              </n-ellipsis>
            </div>
            <div class="login" v-if="userInfo.browser !== null">
              Broswer:&nbsp;&nbsp;
              <n-ellipsis style="max-width: 70%">
                {{ userInfo.browser }}
              </n-ellipsis>
            </div>
            <div class="login" v-if="userInfo.engine !== null">
              Engine:&nbsp;&nbsp;
              <n-ellipsis style="max-width: 70%">
                {{ userInfo.engine }}
              </n-ellipsis>
            </div>
          </div>
        </div>
      </div>
      <div class="d-b-right">
        <div class="base-info">
          <div class="user">
            <i class="userNum iconfont icon-tuanduishezhi"></i>
            <div class="info">
              <div class="num">
                {{ total.totalUser }}
              </div>
              <div class="u">用户总数</div>
            </div>
          </div>
          <div class="user">
            <i class="newNum iconfont icon-liebiao2"></i>
            <div class="info">
              <div class="num">{{ total.totalPro }}</div>
              <div class="u">近一周新建题目</div>
            </div>
          </div>
          <div class="user ac" v-show="!isSubmit">
            <i class="acNum iconfont icon-fenlei2"></i>
            <i @click="changeIsSubmit" class="change iconfont icon-qiehuan2"></i>
            <div class="info">
              <div class="num">{{ total.totalAc }}</div>
              <div class="u">近一周ac数</div>
            </div>
          </div>
          <div class="user submit" v-show="isSubmit">
            <i class="submitNum iconfont icon-tijiaoshujuxiansuo"></i>
            <i @click="changeIsSubmit" class="change iconfont icon-qiehuan2"></i>
            <div class="info">
              <div class="num">{{ total.totalSubmit }}</div>
              <div class="u">近一周提交数</div>
            </div>
          </div>
          <div class="user">
            <i class="raceNum iconfont icon-bisai"></i>
            <div class="info">
              <div class="num">{{ total.totalRace }}</div>
              <div class="u">近一周比赛</div>
            </div>
          </div>
        </div>
        <div class="echart">
          <div class="echartContainer"></div>
        </div>
      </div>
    </div>
    <div class="d-foot">
      <div class="backend-system">
        <div class="b-s-body">
          <div class="backend-serve">
            <div class="bs-serve">
              网关服务
              <div class="num">
                <div class="serve">
                  Nacos状态:&nbsp;&nbsp;
                  <div class="nacos" v-if="gatewayService.length !== 0">Up</div>
                  <div class="un-nacos" v-else>Down</div>
                </div>
              </div>
            </div>
            <div class="bs-table">
              <div class="bs-ta">
                <el-table class="table" :data="gatewayService" stripe style="width: 100%">
                  <el-table-column type="index" label="序号" width="75" align="center" />
                  <el-table-column prop="serviceId" label="名称" align="center" width="200">
                    <template #default="scope">
                      <div>
                        <n-ellipsis style="max-width: 200px">
                          {{ scope.row.serviceId }}
                        </n-ellipsis>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="host" label="主机" align="center">
                    <template #default="scope">
                      <n-ellipsis style="width: 100%">
                        {{ scope.row.host }}
                      </n-ellipsis>
                    </template>
                  </el-table-column>
                  <el-table-column prop="port" label="端口" align="center" />
                  <el-table-column prop="isStabilize" label="是否开启HTTPS" align="center" width="150">
                    <template #default="scope">
                      <div class="status">
                        <div class="stabilize" v-show="scope.row.secure">
                          已开启
                        </div>
                        <div class="unstabilize" v-show="!scope.row.secure">
                          未开启
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="status" label="状态" align="center">
                    <template #default="scope">
                      <div class="status">
                        <div class="statu" v-show="scope.row.metadata['nacos.healthy'] === 'true'
                          ">
                          健康
                        </div>
                        <div class="unstatu" v-show="scope.row.metadata['nacos.healthy'] === 'false'
                          ">
                          危险
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small
              layout="prev, pager, next,sizes" :total="Number(backendService.total)"
              v-model:current-page="backParams.pageNum" v-model:page-size="backParams.pageSize" />
          </div>
        </div>
      </div>
      <div class="backend-system">
        <div class="j-s-head">后端服务</div>
        <div class="j-s-body">
          <div class="j-q-serve">
            <div class="j-q-table">
              <el-table class="table" :data="backendService.records" stripe style="width: 100%">
                <el-table-column type="index" label="序号" width="75" align="center" />
                <el-table-column prop="name" label="名称" align="center" width="200">
                  <template #default="scope">
                    <div>
                      <n-ellipsis style="max-width: 200px">
                        {{ scope.row.name }}
                      </n-ellipsis>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ip" label="主机" align="center">
                  <template #default="scope">
                    <n-ellipsis style="width: 100%">
                      {{ scope.row.ip }}
                    </n-ellipsis>
                  </template>
                </el-table-column>
                <el-table-column prop="port" label="端口" align="center" />
                <el-table-column prop="core" label="CPU核心数" align="center">
                  <template #default="scope">
                    <div>
                      {{ scope.row.cpuInfo.cpuCores }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="cpuUse" label="CPU使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.cpuInfo.cpuUsage }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="memoryUse" label="内存使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.memoryInfo }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="isStabilize" label="是否开启HTTPS" align="center" width="150">
                  <template #default="scope">
                    <div class="status">
                      <div class="stabilize" v-show="scope.row.isSecure === 0">
                        已开启
                      </div>
                      <div class="unstabilize" v-show="scope.row.isSecure === 1">
                        未开启
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template #default="scope">
                    <div class="status">
                      <div class="statu" v-show="scope.row.isHealthy === 0">
                        健康
                      </div>
                      <div class="unstatu" v-show="scope.row.isHealthy === 1">
                        危险
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
          :total="Number(backendService.total)" v-model:current-page="backParams.pageNum"
          v-model:page-size="backParams.pageSize" />
      </div>
      <div class="backend-system">
        <div class="j-s-head">比赛服务</div>
        <div class="j-s-body">
          <div class="j-q-serve">
            <div class="j-q-table">
              <el-table class="table" :data="judgecontestService.records" stripe style="width: 100%">
                <el-table-column type="index" label="序号" width="75" align="center" />
                <el-table-column prop="name" label="名称" align="center" width="200">
                  <template #default="scope">
                    <div>
                      <n-ellipsis style="max-width: 200px">
                        {{ scope.row.name }}
                      </n-ellipsis>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ip" label="主机" align="center">
                  <template #default="scope">
                    <n-ellipsis style="width: 100%">
                      {{ scope.row.ip }}
                    </n-ellipsis>
                  </template>
                </el-table-column>
                <el-table-column prop="port" label="端口" align="center" />
                <el-table-column prop="core" label="CPU核心数" align="center">
                  <template #default="scope">
                    <div>
                      {{ scope.row.cpuInfo.cpuCores }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="cpuUse" label="CPU使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.cpuInfo.cpuUsage }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="memoryUse" label="内存使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.memoryInfo }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="isStabilize" label="是否开启HTTPS" align="center" width="150">
                  <template #default="scope">
                    <div class="status">
                      <div class="stabilize" v-show="scope.row.isSecure === 0">
                        已开启
                      </div>
                      <div class="unstabilize" v-show="scope.row.isSecure === 1">
                        未开启
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template #default="scope">
                    <div class="status">
                      <div class="statu" v-show="scope.row.isHealthy === 0">
                        健康
                      </div>
                      <div class="unstatu" v-show="scope.row.isHealthy === 1">
                        危险
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
          :total="Number(judgecontestService.total)" v-model:current-page="judgecontestParams.pageNum"
          v-model:page-size="judgecontestParams.pageSize" />
      </div>
      <div class="backend-system">
        <div class="j-s-head">判题源</div>
        <div class="j-s-body">
          <div class="j-q-serve">
            <div class="j-q-table">
              <el-table class="table" :data="judgeoriginService.records" stripe style="width: 100%">
                <el-table-column type="index" label="序号" width="75" align="center" />
                <el-table-column prop="name" label="名称" align="center" width="200">
                  <template #default="scope">
                    <div>
                      <n-ellipsis style="max-width: 200px">
                        {{ scope.row.name }}
                      </n-ellipsis>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="ip" label="主机" align="center">
                  <template #default="scope">
                    <n-ellipsis style="width: 100%">
                      {{ scope.row.ip }}
                    </n-ellipsis>
                  </template>
                </el-table-column>
                <el-table-column prop="port" label="端口" align="center" />
                <el-table-column prop="core" label="CPU核心数" align="center">
                  <template #default="scope">
                    <div>
                      {{ scope.row.cpuInfo.cpuCores }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="cpuUse" label="CPU使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.cpuInfo.cpuUsage }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="memoryUse" label="内存使用率" align="center">
                  <template #default="scope">
                    <div>{{ scope.row.memoryInfo }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="isStabilize" label="是否开启HTTPS" align="center" width="150">
                  <template #default="scope">
                    <div class="status">
                      <div class="stabilize" v-show="scope.row.isSecure === 0">
                        已开启
                      </div>
                      <div class="unstabilize" v-show="scope.row.isSecure === 1">
                        未开启
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                  <template #default="scope">
                    <div class="status">
                      <div class="statu" v-show="scope.row.isHealthy === 0">
                        健康
                      </div>
                      <div class="unstatu" v-show="scope.row.isHealthy === 1">
                        危险
                      </div>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <el-pagination class="pagination" :page-sizes="[20, 50, 100]" background small layout="prev, pager, next,sizes"
          :total="Number(judgeoriginService.total)" v-model:current-page="judgeoriginParams.pageNum"
          v-model:page-size="judgeoriginParams.pageSize" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, reactive } from "vue"
import { useRoute } from "vue-router"
import useStore from "@/store"
import * as echarts from "echarts"
//数据视图界面的接口
import {
  getLoginInfoAPI,
  getUserNumAPI,
  getWeekProblemNumAPI,
  getWeekAcNumAPI,
  getWeekRaceNumAPI,
  getJudgeBackendServeAPI,
  getGateWayAPI,
  getJudgeContestServiceAPI,
  getJudgeOriginServiceAPI,
} from "@/api/adminAPI/adminAPI"
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components"
// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features"
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers"
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
])

let echart = null
let forTime = null
const route = useRoute()
onMounted(() => {
  echart = echarts.init(document.querySelector(".echartContainer"))
  getSevenDay()
  getLoginInfo()
  getUserNum()
  getWeekProblemNum()
  getWeekAcNum()
  getWeekRaceNum()
  initEchart()
  getJudgeBackendServe()
  getGateWay()
  getJudgeContestService()
  getJudgeOriginService()
  if (forTime) {
    clearInterval(forTime)
  }
  forTime = setInterval(() => {
    if (route.name.includes('dashboard')) {
      getJudgeBackendServe()
      getGateWay()
      getJudgeContestService()
      getJudgeOriginService()
    } else {
      clearInterval(forTime)
    }
  }, 10000)
})

const store = useStore()
const userInfo = ref({
  time: "",
  ip: "",
  os: "",
  browser: "",
  engine: "",
})
const total = ref({
  totalUser: 0,
  totalPro: 0,
  totalAc: 0,
  totalRace: 0,
  totalSubmit: 0,
})
const totalDetailInfo = ref({
  allRace: [],
  allAc: [],
  allCreatePro: [],
  allSubmit: [],
})
const isSubmit = ref(false)
const changeIsSubmit = () => {
  isSubmit.value = !isSubmit.value
  if (isSubmit.value) {
    document.querySelector(".ac").classList.remove("userShow")
    document.querySelector(".ac").classList.add("userHide")
    document.querySelector(".submit").classList.remove("userHide")
    document.querySelector(".submit").classList.add("userShow")
  } else {
    document.querySelector(".submit").classList.remove("userShow")
    document.querySelector(".submit").classList.add("userHide")
    document.querySelector(".ac").classList.remove("userHide")
    document.querySelector(".ac").classList.add("userShow")
  }
}
const backParams = reactive({
  pageNum: 1,
  pageSize: 20,
})
const judgeoriginParams = reactive({
  pageNum: 1,
  pageSize: 20,
})
const gateParams = reactive({
  pageNum: 1,
  pageSize: 20,
})
const judgecontestParams = reactive({
  pageNum: 1,
  pageSize: 20,
})
const backendService = ref({
  records: [],
  total: 0,
})

const judgecontestService = ref({
  records: [],
  total: 0,
})
const judgeoriginService = ref({
  records: [],
  total: 0,
})
const gatewayService = ref([])
const beforeSeventDay = ref([])
let deboundTime = null
watch(backParams, () => {
  if (deboundTime) {
    clearTimeout(deboundTime)
  }
  deboundTime = setTimeout(() => {
    getJudgeBackendServe()
  }, 300)
})
watch(judgeoriginParams, () => {
  if (deboundTime) {
    clearTimeout(deboundTime)
  }
  deboundTime = setTimeout(() => {
    getJudgeOriginService()
  }, 300)
})
watch(judgecontestParams, () => {
  if (deboundTime) {
    clearTimeout(deboundTime)
  }
  deboundTime = setTimeout(() => {
    getJudgeContestService()
  }, 300)
})
watch(gateParams, () => {
  if (deboundTime) {
    clearTimeout(deboundTime)
  }
  deboundTime = setTimeout(() => {
    getGateWay()
  }, 300)
})

//获取前七天的日期，并转换格式为"YY-MM-DD"
const getSevenDay = () => {
  const oneDay = 24 * 60 * 60 * 1000 // 这里定义一天的毫秒数
  const resultArray = []
  for (let i = 6; i >= 0; i--) {
    const currentDate = new Date(Date.now() - i * oneDay) // 计算出每天的日期
    const year = currentDate.getFullYear()
    const month = String(currentDate.getMonth() + 1).padStart(2, "0") // 月份需要补零
    const day = String(currentDate.getDate()).padStart(2, "0") // 日期也需要补零
    const formattedDate = `${year}-${month}-${day}` // 格式化日期为 yyyy-mm-dd 的形式
    resultArray.push(formattedDate)
  }
  beforeSeventDay.value = resultArray
}
const getLoginInfo = async () => {
  await getLoginInfoAPI().then((res) => {
    if (res.data.code === 200) {
      userInfo.value = res.data.data
    }
  })
}
const getUserNum = async () => {
  await getUserNumAPI().then((res) => {
    if (res.data.code === 200) {
      total.value.totalUser = res.data.data
    }
  })
}
const getWeekProblemNum = async () => {
  await getWeekProblemNumAPI().then((res) => {
    if (res.data.code === 200) {
      let num = 0
      let array = []
      beforeSeventDay.value.forEach((item) => {
        num += parseInt(res.data.data[item])
        array.push(res.data.data[item])
      })
      total.value.totalPro = num
      totalDetailInfo.value.allCreatePro = array
      initEchart()
    }
  })
}
const getWeekAcNum = async () => {
  await getWeekAcNumAPI().then((res) => {
    if (res.data.code === 200) {
      let num = 0
      let array = []
      let submitNum = 0
      let submitArray = []
      beforeSeventDay.value.forEach((item) => {
        num += parseInt(res.data.data.acCount[item])
        array.push(res.data.data.acCount[item])
        submitNum += parseInt(res.data.data.submitCount[item])
        submitArray.push(res.data.data.submitCount[item])
      })
      total.value.totalAc = num
      totalDetailInfo.value.allAc = array
      total.value.totalSubmit = submitNum
      totalDetailInfo.value.allSubmit = submitArray
      initEchart()
    }
  })
}
const getWeekRaceNum = async () => {
  await getWeekRaceNumAPI().then((res) => {
    if (res.data.code === 200) {
      let num = 0
      let array = []
      beforeSeventDay.value.forEach((item) => {
        num += parseInt(res.data.data[item])
        array.push(res.data.data[item])
      })
      total.value.totalRace = num
      totalDetailInfo.value.allRace = array
      initEchart()
    }
  })
}
const getJudgeBackendServe = async () => {
  await getJudgeBackendServeAPI(backParams).then((res) => {
    if (res.data.code === 200) {
      backendService.value = res.data.data
      backendService.value.records.forEach((item) => {
        item.cpuInfo = JSON.parse(item.cpuInfo)
      })
    }
  })
}
const getGateWay = async () => {
  await getGateWayAPI(gateParams).then((res) => {
    if (res.data.code === 200) {
      gatewayService.value = res.data.data
    }
  })
}
const getJudgeContestService = async () => {
  await getJudgeContestServiceAPI(judgecontestParams).then((res) => {
    if (res.data.code === 200) {
      judgecontestService.value = res.data.data
      judgecontestService.value.records.forEach((item) => {
        item.cpuInfo = JSON.parse(item.cpuInfo)
      })
    }
  })
}
const getJudgeOriginService = async () => {
  await getJudgeOriginServiceAPI(judgeoriginParams).then((res) => {
    if (res.data.code === 200) {
      judgeoriginService.value = res.data.data
      judgeoriginService.value.records.forEach((item) => {
        item.cpuInfo = JSON.parse(item.cpuInfo)
      })
    }
  })
}
const initEchart = () => {
  const linear = {
    type: "linear",
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: "#02bcff", // 0% 处的颜色
      },
      {
        offset: 1,
        color: "#5555ff", // 100% 处的颜色
      },
    ],
    global: false, // 缺省为 false
  }
  echart.setOption({
    // 图表的提示
    tooltip: {},
    // 图例
    legend: {
      data: ["比赛数", "ac数", "创建题目数", "总提交数"],
      selected: {
        总提交数: false,
      },
    },

    // x轴线
    xAxis: { data: beforeSeventDay.value },
    // y轴线
    yAxis: {},
    // 设置数据
    series: [
      {
        // 数据名称
        name: "比赛数",
        // 类型为柱状图
        type: "bar",
        // 数据data
        data: totalDetailInfo.value.allRace,
        // color:["#ac4cff"]
        itemStyle: {
          color: linear,
          borderRadius: [30, 30, 0, 0],
        },
      },
      {
        // 数据名称
        name: "ac数",
        // 类型为柱状图
        type: "line",
        // 数据data
        data: totalDetailInfo.value.allAc,
        areaStyle: "#55c2c42d",
      },
      {
        // 数据名称
        name: "创建题目数",
        // 类型为柱状图
        type: "line",
        smooth: true,
        // 数据data
        data: totalDetailInfo.value.allCreatePro,
        areaStyle: "#55c47c39",
      },
      {
        // 数据名称
        name: "总提交数",
        // 类型为柱状图
        type: "line",
        smooth: false,
        // 数据data
        data: totalDetailInfo.value.allSubmit,
        areaStyle: "#55c47c39",
      },
    ],
  })
}
</script>
<style lang="less">
.dashboard {
  margin: auto;
  width: 96%;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  margin-top: 10px;

  .d-head {
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: 550;
    color: #555;
    display: flex;
    text-align: center;
    border-bottom: 2px solid @lineColor;
    padding-bottom: 10px;

    .iconfont {
      display: flex;
      align-content: center;
      font-size: 24px;
      margin-right: 3px;
      font-weight: 400;
      color: #555;
    }
  }

  .d-body {
    display: flex;

    .d-b-left {
      border-radius: 10px;
      margin-top: 10px;
      margin-left: 10px;
      width: 28%;
      box-shadow: 0 5px 10px rgba(0, 10, 32, 0.1),
        0 2px 8px rgba(0, 10, 32, 0.07);

      .user {
        padding-top: 10px;
        padding-left: 10px;

        .u-head {
          display: flex;
          padding: 8px 15px;
          border-bottom: 1px solid #a0d8b06f;

          .avatar {
            border-radius: 50%;
            border: 1px solid #f5e2e2a6;

            .diyAvatar {
              display: inline-flex;
              width: 100px;
              height: 100px;
              border-radius: 50%;
              font: 2.5rem / 100px Helvetica, Arial, sans-serif;
              align-items: center;
              justify-content: center;
              text-align: center;
              user-select: none;
              background-color: rgb(81, 181, 63);
              color: rgb(255, 255, 255);
            }
          }

          .u-info {
            padding: 0px 20px;
            float: left;

            .u-name {
              font-size: 24px;
              font-weight: 600;
              padding: 10px 0;
              color: #18a057b1;
            }

            .u-lever {
              display: flex;
              align-content: center;

              .ordinary {
                display: flex;
                align-items: center;
                height: 24px;
                padding: 0 8px;
                background-image: linear-gradient(to right,
                    rgba(88, 222, 58, 0.482),
                    rgba(34, 217, 156, 0.714),
                    rgba(15, 205, 234, 0.482));
                color: #fff;
                margin: 0 auto;
                border-radius: 20px;
                font-size: 12px;
              }

              .super {
                display: flex;
                align-items: center;
                height: 24px;
                padding: 0 8px;
                background-image: linear-gradient(to right,
                    rgba(220, 123, 202, 0.482),
                    rgba(228, 162, 49, 0.481),
                    rgba(210, 162, 99, 0.566));
                color: #ff26006d;
                font-weight: 550;
                margin: 0 auto;
                border-radius: 20px;
                font-size: 12px;
              }
            }
          }
        }
      }

      .user-login {
        padding: 10px;

        .laster {
          font-size: 1.134rem;
          color: #18a087b1;
        }

        .login-info {
          display: flex;
          align-items: center;
          justify-content: left;
          flex-direction: column;
          padding: 10px 20px;

          .login {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            margin-top: 15px;
          }
        }
      }
    }

    .d-b-right {
      border-radius: 10px;
      margin-top: 10px;
      margin-left: 10px;
      width: 70%;
      box-shadow: 0 5px 10px rgba(0, 10, 32, 0.1),
        0 2px 8px rgba(0, 10, 32, 0.07);

      .base-info {
        display: flex;
        justify-content: space-evenly;
        margin-top: 10px;

        .iconfont {
          font-size: 2.34rem;
          margin-right: 10px;
        }

        .user {
          display: flex;
          align-items: center;
          width: 22%;
          box-shadow: 0 5px 10px rgba(0, 10, 32, 0.1),
            0 2px 8px rgba(0, 10, 32, 0.07);
          border-radius: 10px;
          position: relative;

          .change {
            position: absolute;
            font-size: 15px;
            top: 0%;
            right: 2px;
            color: #4142449e;
            cursor: pointer;
            transition: all 0.3s ease;
          }

          .change:hover {
            color: rgba(54, 153, 54, 0.62);
            transform: scale(1.2);
          }

          .userNum {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to top,
                #81c1669e,
                #6ba77cb8,
                #66b79c85);
            width: 60px;
            color: #fff;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          }

          .newNum {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to bottom,
                #66b3c19e,
                #6b89a7b8,
                #7666b785);
            width: 60px;
            color: #fff;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          }

          .acNum {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to top,
                #c184669e,
                #a7916bb8,
                #abb76685);
            width: 60px;
            color: #fff;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          }

          .submitNum {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to bottom,
                #c189669e,
                #84a76b7e,
                #6d66b74d);
            width: 60px;
            color: #fff;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          }

          .raceNum {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to bottom,
                #a966c19e,
                #906ba7b8,
                #6686b785);
            width: 60px;
            color: #fff;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          }

          .info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;

            .num {
              font-size: 1.175rem;
              font-weight: 650;
              color: #898a8d9e;
            }
          }
        }

        .userShow {
          animation: isShow 1s;
        }

        .userHide {
          animation: noShow 1s;
        }

        @keyframes isShow {
          0% {
            opacity: 0.75;
          }

          10% {
            opacity: 0.5;
          }

          20% {
            opacity: 0.25;
          }

          30% {
            opacity: 0.1;
          }

          50% {
            opacity: 0.25;
          }

          75% {
            opacity: 0.55;
          }

          100% {
            opacity: 1;
          }
        }

        @keyframes noShow {
          0% {
            opacity: 1;
          }

          10% {
            opacity: 0.75;
          }

          20% {
            opacity: 0.5;
          }

          30% {
            opacity: 0.25;
          }

          50% {
            opacity: 0.1;
          }

          100% {
            opacity: 0;
          }
        }
      }

      .echart {
        min-height: 300px;
        width: 100%;

        .echartContainer {
          min-height: 300px;
          width: 100%;
          padding-top: 40px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .d-foot {
    padding: 0px 10px;

    .backend-system {
      margin-top: 20px;
      box-shadow: 2px 4px 50px #d9d9d9, -12px -12px 50px #ffffff;
      border-radius: 10px;
      padding: 15px 10px;

      .b-s-head {
        font-size: 1.23rem;
        padding-left: 10px;
        color: #23b6d4a6;
        font-weight: 550;
        border-bottom: 1px solid #18a0573b;
      }

      .b-s-body {
        .backend-serve {
          .bs-serve {
            color: #0144f09e;
            font-weight: 550;
            padding-left: 20px;
            border-bottom: 1px solid #18a0573b;
            font-size: 1.23rem;
            padding-left: 10px;
            display: flex;

            .num {
              padding: 0px 20px 0px;
              display: flex;
              align-items: center;

              .serve {
                display: flex;
                margin-right: 14%;
                font-weight: 550;
                color: #555;
                font-size: 16px;
                width: 200px;

                .nacos {
                  margin-top: 2px;
                  background-color: rgb(58, 159, 85);
                  width: 30px;
                  height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  border-radius: 5px;
                  font-weight: 500;
                  font-size: 0.775rem;
                }

                .un-nacos {
                  margin-top: 2px;
                  background-color: #d4464a52;
                  width: 50px;
                  height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  border-radius: 5px;
                  font-weight: 500;
                  font-size: 0.775rem;
                }

                .https {
                  margin-top: 2px;
                  background-color: #e4171e96;
                  width: 70px;
                  height: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  color: #fff;
                  border-radius: 5px;
                  font-weight: 500;
                  font-size: 0.775rem;
                }
              }
            }
          }

          .bs-table {
            padding: 20px 20px 0;

            .bs-ta {
              border: 1px solid #dedee350;
              box-shadow: 0 2px 4px rgba(0, 10, 32, 0.1),
                0 2px 6px rgba(0, 10, 32, 0.07);
              border-radius: 10px;
            }

            .table {
              max-height: 50vh;
              overflow: hidden;
              overflow-y: auto;
            }

            .status {
              display: flex;
              justify-content: center;
              align-items: center;

              .stabilize {
                background-color: #3759b799;
                width: 60px;
                color: #fff;
                border-radius: 5px;
              }

              .unstabilize {
                background-color: #be2626cf;
                width: 60px;
                color: #fff;
                border-radius: 5px;
              }

              .statu {
                background-color: rgb(47, 172, 81);
                width: 40px;
                color: #fff;
                border-radius: 5px;
              }

              .unstatu {
                background-color: #be2626cf;
                width: 40px;
                color: #fff;
                border-radius: 5px;
              }
            }
          }

          .pagination {
            width: 96%;
            height: 5%;
            margin: 10px auto;
            display: flex;
            justify-content: center;
          }
        }
      }

      .j-s-head {
        color: #0144f09e;
        font-weight: 550;
        padding-left: 20px;
        border-bottom: 1px solid #18a0573b;
        font-size: 1.23rem;
        padding-left: 10px;
      }

      .j-s-body {
        .j-q-serve {
          padding: 20px 20px 0;

          .j-q-table {
            border: 1px solid #dedee350;
            box-shadow: 0 2px 4px rgba(0, 10, 32, 0.1),
              0 2px 6px rgba(0, 10, 32, 0.07);
            border-radius: 10px;

            .table {
              max-height: 50vh;
            }

            .status {
              display: flex;
              justify-content: center;
              align-items: center;

              .stabilize {
                background-color: #3759b799;
                width: 60px;
                color: #fff;
                border-radius: 5px;
              }

              .unstabilize {
                background-color: #be2626cf;
                width: 60px;
                color: #fff;
                border-radius: 5px;
              }

              .statu {
                background-color: rgb(47, 172, 81);
                width: 40px;
                color: #fff;
                border-radius: 5px;
              }

              .unstatu {
                background-color: #be2626cf;
                width: 40px;
                color: #fff;
                border-radius: 5px;
              }
            }
          }
        }
      }

      .pagination {
        width: 96%;
        height: 5%;
        margin: 10px auto;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
